<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card>
      <SearchForm
        v-model="formOption.data"
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        label-width="90px"
      />
    </el-card>

    <!-- 表格区域 -->
    <el-card class="mt-20">
      <PageTable :columns="columns" :data="tableData" />
    </el-card>

    <DetailModel :openModel.sync="openModel" :modelType="modelType" />
  </div>
</template>

<script>
import DetailModel from './components/detailModel'
export default {
  components: {
    DetailModel
  },
  data() {
    return {
      // 表单相关
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '姓名',
            value: 'couponCode',
            labelWidth: '70px'
          },
          {
            type: 'input',
            label: '手机号',
            value: 'acquireRatio',
            labelWidth: '90px'
          },
          {
            type: 'select',
            label: '岗位',
            value: 'isSortHome',
            labelWidth: '70px',
            clearable: true,
            selectList: []
          },
          {
            type: 'select',
            label: '状态',
            value: 'isSortHome',
            labelWidth: '70px',
            clearable: true,
            selectList: []
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.pageParams.pageNo = 1
            this.handleLoad()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.handleLoad()
          }
        },
        {
          label: '新增',
          onClick: () => {
            this.handleAdd()
          }
        }
      ],

      // 请求参数
      pageParams: {
        pageNo: 1
      },

      // 表格内容
      columns: [
        {
          prop: 'supplierName',
          label: '商品'
        },
        {
          prop: 'companyName',
          label: '所属公司'
        },
        {
          prop: 'jobName',
          label: '岗位'
        },
        {
          prop: 'status',
          label: '状态'
        },
        {
          prop: 'phone',
          label: '手机号'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => this.handleSeeDetail(row)}
                >
                  查看
                </el-button>
                <el-button type="text" onClick={() => this.handleEdit(row)}>
                  编辑
                </el-button>
                <el-button
                  type="text"
                  onClick={() => this.handleSeeDetail(row)}
                >
                  删除
                </el-button>
              </div>
            )
          }
        }
      ],

      // 表格数据
      tableData: [{}],

      openModel: false,

      // 弹框类型 read edit add
      modelType: 'read'
    }
  },
  methods: {
    // 初始化数据
    handleLoad() {},

    // 新增
    handleAdd() {
      this.modelType = 'add'
      this.openModel = true
    },
    // 查看
    handleSeeDetail() {
      this.modelType = 'read'
      this.openModel = true
    },
    // 编辑
    handleEdit() {
      this.modelType = 'edit'
      this.openModel = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
